<template>
  <div class='appItem' @click="handleClick(apps)">
    <img :src="require(`@/assets/icons/icon1.png`)" alt="图标">
    <span >{{apps.appName}}</span>
  </div>
</template>
<script>

export default {
  props:{
    apps:{
      type: Object,
      default:()=>{}
    }
  },
  methods:{
    handleClick(apps){
      this.$router.push('/application/' + apps.id + '/common')
      this.$store.commit('application/SET_APPLICATIONID',apps.id)
    }
  }

}
</script>

<style lang='scss' scoped>
.appItem{
  cursor: pointer;
  width: 194px;
  height: 144px;
  margin: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  img{
    width: 60px;
    height: 60px;
  }
  i{
    display: none;
  }
  span{
    margin-top: 12px;
    color: #1f2d3d;
    font-size: 16px;
  }
  &:hover{
    box-sizing: border-box;
    border:1px solid rgb(209, 199, 199);
    border-radius:5px;
    box-shadow: 0 0 5px #888888;
    i{
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      top:10px;
      right: 10px;
      &:hover{
        color: #0DB3A6;
      }
    }
  }
}
.popover-wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 150px;
  span{
    line-height: 30px;
    padding-left: 10px;
    width: 150px;
    height: 30px;
    border-radius: 6px;
    &:hover{
      background: #f4f6f9;
    }
  }
  .delete{
    color: red;
  }

}
</style>